<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<th:block th:include="include :: wxheader('自助提货系统')" />
		<!--<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4 "></script>
		<!--<script type="text/javascript" src="js/mui.min.js"></script>-->
<!--		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/mui.min.css" />-->
		<title>公司地址</title>
		<style>
			body {
				margin: 0;
				padding: 0
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">公司地址</h1>
			<a th:href="@{/wx/index}" class="mui-icon mui-icon-home mui-pull-right"></a>
		</header>

		<div id="content" class="mui-content">
			<div class="main telus">
				<div style="width: 100%;height: 300px;background-color: #9e9e9e" id="map">

				</div>

			</div>

		</div>

		<!-- html装载容器 -->
		<!--<script type="text/javascript" src="js/jquery-2.1.4.js"></script>-->
		<th:block th:include="include :: wxfooter" />
		<script type="text/javascript" th:inline="javascript">
			// mui.init()
			var mapLongitude= [[${shop.mapLongitude}]];
			var mapLatitude= [[${shop.mapLatitude}]];
			var map = new BMap.Map("map");
			var point = new BMap.Point(mapLongitude, mapLatitude); //创建经纬度地址
			var marker = new BMap.Marker(point); // 创建标注
			var myIcon = new BMap.Icon(ctx+"/img/add.png", new BMap.Size(28, 28)); //图标
			var marker = new BMap.Marker(point, {
				icon: myIcon
			}); // 创建标注
			map.addOverlay(marker); // 将标注添加到地图中
			map.centerAndZoom(point, 40);
			var mapType1 = new BMap.MapTypeControl({
				mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
			});
			var overView = new BMap.OverviewMapControl();
			var top_left_control = new BMap.ScaleControl({
				anchor: BMAP_ANCHOR_TOP_LEFT
			}); // 左上角，添加比例尺
			map.addControl(new BMap.ScaleControl());
			map.addControl(new BMap.OverviewMapControl());
			map.addControl(top_left_control);
			map.addControl(mapType1); //2D图，卫星图
			map.addControl(overView); //添加默认缩略地图控件
			map.enableScrollWheelZoom(true);
			var opts = {
				width: 180, // 信息窗口宽度
				height: 110, // 信息窗口高度
				title: [[${shop.shopName}]], // 信息窗口标题
				enableMessage: true //设置允许信息窗发送短息
			}
			var infoWindow = new BMap.InfoWindow("地址："+[[${shop.shopAddress}]]+"<br>电话："+[[${shop.shopTel}]], opts); // 创建信息窗口对象
			marker.addEventListener("click", function() {
				map.openInfoWindow(infoWindow, point); //开启信息窗口
			});
		</script>
	</body>

</html>